<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>查看我的预约</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/appointing-detail.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-head">
                <img class="card-media" src="image/goods-house.png" />
                <div class="card-head-title">￥1000/月</div>
                <div class="card-head-mask"></div>
            </div>
        </div>
    </div>
    <div class="person-info">
        <img class="circle-image" src="image/1.jpg">
        <div class="user-info">
            <span class="username">梦柯</span>
            <a href="comment.html">查看评价</a>
            <div class="star-bar">
                <i class="icon icon-star"></i>
                <i class="icon icon-star"></i>
                <i class="icon icon-star"></i>
                <i class="icon icon-star"></i>
                <i class="icon icon-star-blank"></i>
            </div>
            <span class="font-blue">5分</span>
        </div>
    </div>
    <div class="introduction">
        “Honey，我是一个爱笑的90后男孩，和你一样，我也是租房族。因为在小家，我认识了很多 朋友，希望你是其中一个。我将以最饱满的热情给你提供服务，期待尽快与你见面！”
    </div>
    <div class="form-body">
        <form action="">
            <div class="form-item">
                <span class="item-title">房间号</span>
                <a class="item-action" href="javascript:;">
                    <span class="action-value">2048</span>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">姓名</span>
                <span class="item-action">
                  <span class="action-value">陈冠希</span>
                </span>
            </div>
            <div class="form-item">
                <span class="item-title">手机号</span>
                <span class="item-action">
                  <span class="action-value">13220140908</span>
                </span>
            </div>
            <div class="form-item">
                <span class="item-title">预约时间</span>
                <span class="item-action">
                    <span class="action-value">3-12 12</span>
                </span>
            </div>
            <div class="form-item">
                <span class="item-title">留言</span>
                <span class="item-action">
                    <span class="action-value">时间紧凑</span>
                </span>
            </div>
        </form>
    </div>
    <div class="footer-padding"></div>
    <div class="tool-bar">
        <a href="javascript:;" class="font-red" style="width: 60%; font-size: 12px;">
            距离7天16时26分47秒
        </a>
        <span class="separator"></span>
        <a class="last" href="javascript:;">
            <i class="icon icon-phone"></i>
        </a>
        <a href="javascript:;" class="btn yellow cancel">取消预约</a>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.ok', function() {
                var text = $('.dialog .icon-dot').parent().text();
                $('.cancel-confirm').dialog('hide');
                $('.cancel-alert').dialog('show');
            });

            $('body').on('click', '.cancel', function() {
                $('.cancel-confirm').dialog('show');
            });

            $('body').on('click', '.dialog .icon', function() {
                $('.dialog .icon').removeClass('icon-dot').addClass('icon-dot-blank');
                $(this).removeClass('icon-dot-blank').addClass('icon-dot');
            });
        });
    </script>
    <div class="dialog cancel-confirm">
        <div class="dialog-title">Honey, 你确定不是手抖吗？</div>
        <div class="dialog-body">
            <ul>
                <li><i class="icon icon-dot"></i> 时间冲突</li>
                <li><i class="icon icon-dot-blank"></i> 找到房子了</li>
                <li><i class="icon icon-dot-blank"></i> 要去外地</li>
                <li><i class="icon icon-dot-blank"></i> 管家没颜值</li>
                <li><i class="icon icon-dot-blank"></i> 我就是变心了</li>
            </ul>
            <textarea name="" rows="3" placeholder="我不相信，我要讨个说法..."></textarea>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue ok">残忍拒绝</a>
            <a href="javascript:;" class="font-red close" style="margin-left: 40%;">开个玩笑</a>
        </div>
    </div>
    <div class="dialog cancel-alert">
        <div class="dialog-title">Honey, 我们还会再见的！</div>
        <div class="dialog-body">
            <span class="subtitle">今日一别，必有回响，我相信我们还是相爱的，有空来小家吃饭哦！</span>
            <div class="image-container"><img src="image/cancel.png" /></div>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue close">关闭</a>
        </div>
    </div>
</body>

</html>
